<template>
    <div class="table-page-search-wrapper">
     <a-form :form="form"  :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="formAttributes && formAttributes.length>0" @keyup.enter.native="searchQuery">
          <a-row  type="flex" justify="start">
              <template v-for="(item,i) in formAttributes">
                <a-col :md='24/(mostColumns>maxColumns?maxColumns:mostColumns)' v-if="i<maxColumns*2" :key="item.index">
                  <LQueryFormItem  :item="item" :changeItem="changeItem" :form="form"></LQueryFormItem>
                </a-col>
                <a-col :md='24/(mostColumns>maxColumns?maxColumns:mostColumns)' v-else-if="advanced" :key="item.index">
                   <LQueryFormItem :item="item" :changeItem="changeItem" :form="form"></LQueryFormItem>
                </a-col>
              </template>
             
               
              <a-col>
              <span class="table-page-search-submitButtons" :style=" { marginLeft:'30px',float: 'right', overflow: 'hidden' } || {} ">
                <a-form-item>
                    <a-button shape="round" size="small" type="primary" @click="searchQuery">查询</a-button>
                    <a-button v-if="isShowReset" shape="round" size="small" style="margin-left: 8px" @click="reset">重置</a-button>
                    <a v-if="formAttributes.length>(maxColumns*2)" @click="toggleAdvanced" style="margin-left: 8px">
                        {{ advanced ? '收起' : '展开' }}
                        <a-icon :type="advanced ? 'up' : 'down'"/>
                    </a>
                </a-form-item>
                
                
              </span>
            </a-col>
          </a-row>
     </a-form>
    </div>
</template>

<script>

import LQueryFormItem from './LQueryFormItem'

export default {
    name:'LQueryForm',
    components:{LQueryFormItem},
    props:{
        mostColumns:{
            type:Number,
            default:3
        },
        formAttributes:{
           type:Array,
           default:()=>[]
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 6 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 18 }}
            }
        },
        queryTable:Object,
        isShowReset:{
            type:Boolean,
            default:true
        }
       
    },
    data(){
        return{
            maxColumns:3,//最多列数
            form:{},
            advanced:false,
            changeItem:{}//表单中当前改变值的组件，键值对
        }
    },
    created(){
        this.form=this.$form.createForm(this,{onValuesChange:this.valueChange}) 
    },
    methods:{
        toggleAdvanced () {
            this.advanced = !this.advanced
        },
        getForm(){
            return this.form
        },
        valueChange(props, values){
            this.changeItem = values
            this.changeEventHandler()
        },
        changeEventHandler(){
            if(this.changeItem){
                let item = JSON.parse(JSON.stringify(this.changeItem))
                if(Object.getOwnPropertyNames(item).length==1){
                    this.$emit("onQueryFormChange",item)
                    if(this.queryTable){
                        this.queryTable.onQueryFormChange(item) 
                    }
                }
            }
        },
        searchQuery(){
           this.form.validateFields((err, values) => {
              if (!err) {
                if(this.queryTable){
                    this.queryTable.queryFormVal=values
                    this.queryTable.searchQuery() 
                }else{
                    this.$emit("queryMethod",values)
                }
              }
            })
          
        },
        getQueryFormVal(){
           let val=null
            this.form.validateFields((err, values) => {
              if (!err) {
                val = values
              }
            })
            return val
        },
        reset(){
          this.form.resetFields()
          this.searchQuery()
        }
    }
}
</script>
